/**
 * Layouts
 */

.l-inline li {
    display: block;

    @media screen and (min-width: $canvasMedium) {
        display: inline-block;
    }
}

.l-stacked li {
    display: block;
}

.l-inline--navigation {
    @extend .l-inline;
    & ul > li > a {
        display: block;
        @include rem(padding-top, $unit /2);
        @include rem(padding-bottom, $unit /2);
        @include rem(padding-right, $unit);
        @include rem(padding-left, $unit);

        @media screen and (min-width: $canvasMedium) {
            display: inline;
        }
    }
}

.l-figure {
    @include rem(margin-bottom, $unit);
}

.l-figure--left {
    @extend .l-figure;
    float: left;

    @media screen and (max-width: $canvasMedium - 1) {
        float: none;
    }
    @media screen and (min-width: $canvasMedium) {
        @include rem(margin-right, $unit);
    }
}

.l-figure--right {
    @extend .l-figure;
    float: right;

    @media screen and (max-width: $canvasMedium - 1) {
        float: none;
    }
    @media screen and (min-width: $canvasMedium) {
        @include rem(margin-left, $unit);
    }
}

.l-figure--centered {
    @include rem(margin-top, $unit);
    @include rem(margin-bottom, $unit);
    float: none;
    text-align: center;
}

.l-figure--mobile-centered {
    @media screen and (max-width: $canvasMedium - 1) {
        @include rem(margin-top, $unit);
        @include rem(margin-bottom, $unit);
        float: none;
        text-align: center;
    }
}

.l-2cols {
    @include vendor(column-count, 2);

    & > p {
        margin-top: 0;
    }
}
